import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { actionCreators } from './store';
import {
  LoginWrapper,
  LoginBox,
  Input,
  Button
} from './style'

class Login extends PureComponent {
  render() {
    const { loginStatus } = this.props;
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="账号" innerRef={(input) => this.account = input} />
            <Input placeholder="密码" innerRef={(input) => this.password = input} type="password" />
            <Button onClick={() => this.props.login(this.account, this.password)}>登陆</Button>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to="/" />
    }
  }
}

const mapState = (state) => {
  return {
    loginStatus: state.getIn(['login', 'loginState'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    login(account, password) {
      dispatch(actionCreators.login(account, password))
    }
  }
}

export default connect(mapState, mapDispatch)(Login)